<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS尺寸属性(Dimension)</title>
<style type="text/css">
html,body{
	height:100%;
	background:#660;
	/* 修正IE6振动bug */
	_background-image:url(about:blank);
	_background-attachment:fixed;
}
#body1{
	height:1500px;
	width:99%;
	display:block;
	position:relative;
	background:#3F0;
	overflow:hidden;
}
#body1 div{
	width:100px;
	height:100px;
	margin:10px;
	padding:10px;
	border:5px #993300 solid;
	overflow:auto;
}
#body2{
	background:#C3F;
	overflow:hidden;
	_height:140px;
	*padding-bottom:10px;
}
#body2 div{
	width:100px;
	height:100px;
	float:left;
	margin:10px;
	padding:10px;
	border:5px #993300 solid;
	overflow:auto;
}
#d1{
	position:static;
}
#d2{
	position:absolute;
	top:100px;
	left:200px;
}
#d3{
	position:absolute;
	right:100px;
	bottom:0px;
}
#d4{
	position:fixed;
	top:200px;
	left:100px;
	z-index:100;
	_position:absolute;
	_top:expression(eval((document.documentElement.scrollTop||document.body.scrollTop)+180));
}
#d5{
	position:fixed;
	right:200px;
	bottom:100px;
	z-index:100;
	_position:absolute;
	_top:expression(eval((document.documentElement.scrollTop||document.body.scrollTop)+((document.documentElement.clientHeight||document.body.clientHeight)-280)));
}
.bg{
	position:relative;
	top:10px;
	left:10px;
}
</style>
</head>
<body>
<div id="body1">
<div>position和方位(top/right/bottom/left)配合使用</div>
<div id="d1">static,position默认值,将忽略top,bottom,left,right,z-index声明。</div>
<div id="d2">absolute,左上绝对定位,相对于 static 定位以外的第一个父元素进行定位。</div>
<div id="d3">absolute,右下绝对定位,相对于 static 定位以外的第一个父元素进行定位。</div>
<div id="d4">fixed,左上绝对定位,相对于浏览器窗口进行定位，IE6下使用expression来进行支持(应放置最外层body内)。</div>
<div id="d5">fixed,右下绝对定位,相对于浏览器窗口进行定位，IE6下使用expression来进行支持(应放置最外层body内)。</div>
</div>
<div>故在定位是可将父元素的position值置为relative,则可对其子元素进行相对定位。</div>
<div id="body2">
	<div>1</div>
	<div class="bg">2</div>
	<div>3</div>
    <div>使用了IE6的CSS HACK</div>
</div>
</body>
</html>